<template>
  <div id="app">
    <transition>
      <router-view></router-view>
    </transition>
    <header1></header1>
    <tabbar></tabbar>
    <receptaudio class="recept-audio" :ReceivedFlag="$store.state.receiveAudio" :childAudio='parentAudio'></receptaudio>
  </div>
</template>

<script>
  import header1 from './components/public/header/Header'
  import tabbar from './components/public/tabbar/tabbar'
  import receptaudio from './components/public/audio/ReceptAudio'
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
  import {SET_CURRENTUSER_FRIENDSLIST, RESET_RECEIVE_AUDIO, RESET_SHOW_AUDIO} from './store/mutation-types'
export default {
  name: 'App',
  data() {
    return {
      // unreadList: []
      // showAudio: this.$store.state.receiveAudio
    }
  },
  beforeCreate() {
  },
  components: {
    // 组件注册
    // 底部导航栏
    tabbar,
    // 头部导航栏
    header1,
    // 接收到音频电话时候展现组件
    receptaudio
  },
  computed: {
    ...mapState(['currentLoginUser']),
    ...mapGetters(['getCurrentChatUsername'])
  },
  created() {
    // this.init()
    // console.log(this.showAudio)
  },
  methods: {
    ...mapMutations({
      setCurrentuserFriendslist: SET_CURRENTUSER_FRIENDSLIST,
      resetReceiveAudio: RESET_RECEIVE_AUDIO,
      resetShowAudio: RESET_SHOW_AUDIO
      // resetShowRec: RESET_SHOW_REC
      // revcieveFriendsPost: REVCIEVE_FRIENDS_POST
      // initGetunreadMessageList: INIT_GETUNREAD_MESSAGE_LIST
    }),
    ...mapActions([
      'setFriendsA',
      'getDbMessageListA',
      'setDbMessageListA',
      'setAddFriendsPost',
      'resetCurrentuserFriendlist',
      'deleteFriendList',
      'getGroupInfo',
      'addGroupInfo',
      'setDbMessageListAS'
      ]),
    init() {
    },
    parentAudio(flag) {
      // console.log(flag, '1101010100')
      this.resetReceiveAudio(flag)
    }
  },
  watch: {
    currentLoginUser() {
      var self = this
      // console.log(this.currentLoginUser, '1111111111111111111111')
      this.$imoption.user = this.currentLoginUser.username
      this.$imoption.pwd = this.currentLoginUser.password
      this.$imconn.open(this.$imoption)
      this.$webim.Emoji = {
        path: '../../../../static/face/',
        map: {
          '[):]': 'ee_1.png',
          '[:D]': 'ee_2.png',
          '[;)]': 'ee_3.png',
          '[:-o]': 'ee_4.png',
          '[:p]': 'ee_5.png',
          '[(H)]': 'ee_6.png',
          '[:@]': 'ee_7.png',
          '[:s]': 'ee_8.png',
          '[:$]': 'ee_9.png',
          '[:(]': 'ee_10.png',
          '[:\'(]': 'ee_11.png',
          '[:|]': 'ee_12.png',
          '[(a)]': 'ee_13.png',
          '[8o|]': 'ee_14.png',
          '[|]': 'ee_15.png',
          '[+o(]': 'ee_16.png',
          '[<o)]': 'ee_17.png',
          '[|-)]': 'ee_18.png',
          '[*-)]': 'ee_19.png',
          '[:-#]': 'ee_20.png',
          '[:-*]': 'ee_21.png',
          '[^o)]': 'ee_22.png',
          '[8-)]': 'ee_23.png',
          '[(|)]': 'ee_24.png',
          '[(u)]': 'ee_25.png',
          '[(S)]': 'ee_26.png',
          '[(*)]': 'ee_27.png',
          '[(#)]': 'ee_28.png',
          '[(R)]': 'ee_29.png',
          '[({)]': 'ee_30.png',
          '[(})]': 'ee_31.png',
          '[(k)]': 'ee_32.png',
          '[(F)]': 'ee_33.png',
          '[(W)]': 'ee_34.png',
          '[(D)]': 'ee_35.png'
        }
      }
      this.$imconn.listen({
        // 用户上线
        onOpened: function (message) {
          console.log('用户已上线')
            // 获取用户加入的所有群组
            let options = {
              success: function(resp) {
                // console.log(resp, '0000000000000')
                if (resp.data && resp.data.length > 0) {
                  // 根据群组的ID获取到群组对应的信息内容
                  // self.getGroupInfo(resp.data)
                  // let groupArr = []
                  resp.data.forEach(f => {
                    let options = {
                      groupId: f.groupid,
                      success: function(resp) {
                        // console.log(resp.data[0])
                        // 将获取到的群组信息存入vuex和数据库
                        self.getGroupInfo(resp.data[0])
                        // groupArr.push(resp.data[0])
                      },
                      error: function() {}
                    }
                    self.$imconn.getGroupInfo(options)
                  })
                  // 将获取到的群组信息存入vuex和数据库
                  // self.getGroupInfo(groupArr)
                }
              },
              error: function(e) {
                console.log(e, '根据群组的ID获取到群组对应的信息内容错误')
              }
            }
          self.$imconn.getGroup(options)

          console.log('登录成功获取到该用户的token', message.accessToken)
          // self.getDbMessageListA({username: self.currentLoginUser.username})
          // var token = token.access_token;
          // WebIM.utils.setCookie('webim_' + encryptUsername, token, 1);
          self.$imconn.getRoster({
            success: function (roster) {
              // console.log(roster, '将获取的好友列表用vuex设置')
              roster = roster.filter(f => f.subscription === 'both' || f.subscription === 'to')
              // 用vuex设置好友列表
              let data = {flag: '2', friends: roster}
              self.setCurrentuserFriendslist(data)
              let params = {friends: roster, username: self.currentLoginUser.username}
              // 利用action将好友存进数据库里面
              self.setFriendsA(params)
            }
          })
        },
        // 用户下线
        onClosed: function (message) {
          console.log('用户已下线')
        },
        // 文本接收
        onTextMessage: function (message) {
          // message  data from to
          console.log('message收到的文本信息', message)
          // self.unreadList.push(message) // 调用函数存储所有的未读的消息列表
          // 这里调用action,整理之后放进vuex和users
          self.setDbMessageListA(message)
        },
        // 收到表情消息
        onEmojiMessage: function (message) {
          console.log(message, 'message收到的表情信息')
          let data = message.data
          // console.log(111)
          let msg = ''
          for (let i = 0; i < message.data.length; i++) {
            if (data[i].type === 'txt') {
              msg += data[i].data
            } else if (data[i].type === 'emoji') {
              // let str = '../../.' + data[i].data
              msg += "<img src='" + data[i].data + "'/>"
              // console.log(msg, '-------------------------------------------')
            }
          }
          message.data = msg
          console.log(message, '处理后收到的表情列表')
          self.setDbMessageListA(message)
          // self.initGetunreadMessageList(message)
        },
        // 收到图片消息
        onPictureMessage: function (message) {
          console.log(message, 'message收到的图片信息')
          /* to from type=chat url filename */
          let time = new Date().getTime()
          if (message.delay) {
            time = new Date(message.delay).getTime()
          }
          let text = {msg: message.url, time: time, read: false, self: false, type: 'img'}
          let data = {}
              // console.log(data)
          data['id'] = '1105181206098244#mini-chat_' + message['from'] + '@easemob.com'
              // 通过id查找好友列表里面的用户名称
          data['name'] = message.from
              // console.log(this.msgtext, '12312123')
          data['msg'] = {...text}
          console.log('拼接之后的图片对象', data)
          self.setDbMessageListAS(data)
        },
        // 收到命令消息
        onCmdMessage: function (message) {},
        // 收到音频消息
        onAudioMessage: function (message) {
          console.log(message, 'message收到的音频信息')
        },
        // 收到位置消息
        onLocationMessage: function (message) {
          console.log(message, 'message收到的位置信息')
        },
        // 收到文件消息
        onFileMessage: function (message) {},
        // 视频消息
        onVideoMessage: function (message) {
          var node = document.getElementById('privateVideo')
          var option = {
            url: message.url,
            headers: {
              'Accept': 'audio/mp4'
            },
            onFileDownloadComplete: function (response) {
              var objectURL = this.$webim.utils.parseDownloadResponse.call(this.$imconn, response)
              node.src = objectURL
            },
            onFileDownloadError: function () {
              console.log('File down load error.')
            }
          }
          this.$webim.utils.download.call(this.$imconn, option)
        },
        // 收到视频消息
        // 处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
        onPresence: function (e) {
          console.log(e, '收到好友请求')
          // 收到别人请求时候，就让通讯录上面增加一个小圆点
          // easemobwebim-sdk中收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
          // var handlePresence = function (e) {
            // 发送者希望订阅接收者的出席信息,即别人申请加你为好友
            if (e.type === 'subscribe' && e.status.indexOf('[resp:true]') === -1) {
              // 若e.status中含有[resp:true],则表示为对方同意好友后反向添加自己为好友的消息，
              // demo中发现此类消息，默认同意操作，完成双方互为好友；
              // 如果不含有[resp:true]，则表示为正常的对方请求添加自己为好友的申请消息。
              self.setAddFriendsPost(e)
            }
            // (发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
            if (e.type === 'subscribed' && e.status.indexOf('[resp:true]') !== -1) {
              let friendsObj = {}
              friendsObj['ask'] = e['original_type']
              friendsObj['group'] = []
              friendsObj['jid'] = e['fromJid']
              friendsObj['name'] = e['from']
              friendsObj['subscription'] = 'both'
              friendsObj['headicon'] = ''
              // 原先的请求方修改vuex 和 数据库
              self.resetCurrentuserFriendlist(friendsObj)
              console.log('添加好友成功')
            }
            // （发送者取消订阅另一个实体的出席信息）,即删除现有好友
            if (e.type === 'unsubscribe') {
            }
            // （订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
            if (e.type === 'unsubscribed') {
              console.log('对方拒绝您的添加好友请求,或者对方删除了您')
              // fromJid长长的ID
              self.deleteFriendList(e.fromJid)
            }
            // 删除好友标志
            if (e.type === 'unavailable') {
              console.log('双方删除好友成功')
            }
            // 被邀请进群的对vuex的修改
            if (e.type === 'memberJoinPublicGroupSuccess') {
              let options = {
                groupId: e.from,
                success: function(resp) {
                  let arr = resp.data[0].affiliations
                  let index = arr.findIndex(f => f.owner)
                  let owner = arr[index].owner
                  if (owner !== self.currentLoginUser.username) {
                    // 添加群组个数
                    self.addGroupInfo(resp.data[0])
                  }
                },
                error: function() {
                  console.log('收到群组的邀请信息后获取群组的信息失败')
                }
              }
              self.$imconn.getGroupInfo(options)
            }
        },
        // 处理好友申请
        onRoster: function (message) {
          console.log('处理好友申请', message)
          switch (message[0].subscription) {
            case 'remove':
              console.log('remove删除好友')
              break
            case 'to':
              console.log('to添加好友')
              break
            case 'from':
              console.log('from被添加好友')
              break
            case 'none':
              console.log('none刚发起好友申请')
          }
        },
        // 处理群组邀请
        onInviteMessage: function (message) {
        },
        // 本机网络连接成功
        onOnline: function () {
          console.log('本机网络连接成功')
        },
        // 本机网络掉线
        onOffline: function () {
          console.log('本机网络掉线')
        },
        // 失败回调
        onError: function (message) {
          console.log(message)
        },
        // 黑名单变动
        onBlacklistUpdate: function (list) {
          console.log('查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息', list)
        },
        // 收到消息送达服务器回执
        onReceivedMessage: function(message) {
          console.log('收到消息送达服务器回执', message)
          // 这里稍后做一下发送转圈
        },
        // 收到消息送达客户端回执
        onDeliveredMessage: function(message) {
          console.log('收到消息送达客户端回执', message)
        },
        // 收到消息已读回执
        onReadMessage: function(message) {
          console.log(message, '收到消息已读回执')
        },
        // 创建群组成功回执（需调用createGroupNew）
        onCreateGroup: function(message) {},
        // 如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
        onMutedMessage: function(message) {}
      })
/*
      self.$imrtccall.listener({
        // 接收到语音或者视频通话
        onAcceptCall: function (from, options) {
            console.log('onAcceptCall::', 'from: ', from, 'options: ', options)
        },
        // 通过streamType区分视频流和音频流，streamType: 'VOICE'(音频流)，'VIDEO'(视频流)
        onGotRemoteStream: function (stream, streamType) {
            // console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType)
            // var video = document.getElementById('video')
            // video.srcObject = stream
        },
        onGotLocalStream: function (stream, streamType) {
            // console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType)
            // var video = document.getElementById('localVideo')
            // video.srcObject = stream
        },
        // 接受
        onRinging: function (caller) {
          self.$immui.toast('caller')
          // caller 收到语音邀请，对方的ID
            console.log('onRinging::', 'caller:', caller)
            // this.receiveAudio = true
            // 当用户收到了其他好友的语音邀请时候，展示接受拒绝的界面
            this.resetReceiveAudio(true)
            // self.$store.commit(types.RESET_RECEIVE_AUDIO, true)
        },
        // 拒绝
        onTermCall: function (reason) {
            console.log('onTermCall::, 77777777777777777777777777777777777777')
            console.log('reason:', reason)
        },
        onIceConnectionStateChange: function (iceState) {
            console.log('onIceConnectionStateChange::', 'iceState:', iceState)
            if (iceState === 'closed') {
              // mui.toast('')
              console.log('连接挂断')
              // 当连接挂断的时候 不展示接收到视频
              // self.$store.commit(types.RESET_RECEIVE_AUDIO, false)
              this.resetReceiveAudio(false)
              this.resetShowAudio(false)
              // self.$store.commit(types.RESET_SHOW_AUDIO, false)
              // 不展示发送语音时候弹出来的界面
            } else if (iceState === 'completed') {
              console.log('发送语音连接成功')
            } else if (iceState === 'checking') {
              console.log('正在尝试的连接语音')
            } else if (iceState === 'connected') {
              console.log('connected连接成功')
            }
        },
        onError: function (e) {
            console.log(e, '787877787877787877')
        }
      })
      */
    }
  }
}
</script>

<style lang="scss" scoped>
  /*底部导航栏切换的时候，加上动画的样式*/
  .v-enter{
    opacity: 0;
    transform: translateX(100%);
  }
  .v-leave-to{
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }
  .v-enter-active,
  .v-leave-active{
    transition: all 0.5s ease;
  }
  // 收到语音聊天界面的样式
  .recept-audio{
    transition: all 0.5s ease;
    transform: translateX(100%)
  }
  .recept-audio.active{
    transform: translateX(0)
  }
</style>
